<template>
	<view class="app app-bg">
		<!-- 页面内容开始 -->
		<view style="height: 30rpx;"></view>
		<!-- 会员卡样式 -->
		<view class="vip-card">
			<view class="name">{{ lvInfo.name }}</view>
			<view class="nickname" v-if="isHaveCom">所属人：{{ vk.getVuex("$user.userInfo.nickname") }}</view>
			<view class="vip-bg">分销等级</view>
		</view>


		<!-- 下一级升级信息(当我已拥有会员等级且还有下一级会员等级可以升级时显示) -->
		<view class="vip-explain" v-if="complete && nextLevelInfo && nextLevelInfo.name">
			<view class="cell-box">
				<view class="title">{{upgradeTextCom }}</view>
				<view class="text">{{ nextLevelInfo.name }} 条件</view>
			</view>
			<view class="cell-box">
				<view class="title"></view>
				<view class="text">以下条件需全部满足<text>{{ isUpgrade ? '（已全部达标）':'（未全部达标）' }}</text></view>
			</view>

			<view v-if="nextLevelInfo.upgrade_mode === 1">
				<view class="list" v-if="nextLevelInfo && nextLevelInfo.name">
					<view class="list-title">条件：{{ minVipLvPercent(nextLevelInfo.min_vip_lv) == 100 ? '（已达标）':'（未达标）' }}</view>
					<view class="list-item">
						<u-icon name="vk-mall-icon-quanyi" size="80"></u-icon>
						<view class="list-item-text">
							<view class="item-title">最低VIP等级要求</view>
							<view class="item-amount">达到 {{ vipNameFn(nextLevelInfo.min_vip_lv) }} </view>
						</view>
						<u-circle-progress type="success" :percent="minVipLvPercent(nextLevelInfo.min_vip_lv)" bg-color="#f7f9fd" width="130" border-width="10">
							<view class="u-progress-content">
								<view class="u-progress-dot"></view>
								<text class='u-progress-info'>{{ minVipLvPercent(nextLevelInfo.min_vip_lv) }}%</text>
							</view>
						</u-circle-progress>
					</view>
				</view>
			</view>
			<view v-else class="vk-contents">

				<view class="list" v-if="nextLevelInfo && nextLevelInfo.name">
					<view class="list-title">
						条件1：{{ percentFn('total_recharge_amount') == 100 || percentFn('total_order_amount') == 100 ? '（已达标）':'（未达标）' }}
						<text v-if="nextLevelInfo.total_recharge_amount>0 && nextLevelInfo.total_order_amount>0">（二选一即可）</text>
					</view>
					<view class="list-item" v-if="nextLevelInfo.total_recharge_amount>0">
						<u-icon name="vk-mall-icon-jine" size="80"></u-icon>
						<view class="list-item-text">
							<view class="item-title">累计充值余额</view>
							<view class="item-amount">{{ $fn.priceFilter(nextLevelInfo.total_recharge_amount) }}<text v-if="diffFn('total_recharge_amount')>0">（差{{ vk.pubfn.priceFilter(diffFn('total_recharge_amount')) }}）</text></view>
						</view>
						<u-circle-progress type="success" :percent="percentFn('total_recharge_amount')" bg-color="#f7f9fd" width="130" border-width="10">
							<view class="u-progress-content">
								<view class="u-progress-dot"></view>
								<text class='u-progress-info'>{{ percentFn('total_recharge_amount') }}%</text>
							</view>
						</u-circle-progress>
					</view>

					<view class="list-item" v-if="nextLevelInfo.total_order_amount>0">
						<u-icon name="vk-mall-icon-gouwuche" size="80"></u-icon>
						<view class="list-item-text">
							<view class="item-title">累计消费金额</view>
							<view class="item-amount">{{ $fn.priceFilter(nextLevelInfo.total_order_amount) }}<text v-if="diffFn('total_order_amount')>0">（差{{ vk.pubfn.priceFilter(diffFn('total_order_amount')) }}）</text></view>
							<view class="sum-not-receipt-amount" v-if="data.sumNotReceiptAmount>0">您有 {{ $fn.priceFilter(data.sumNotReceiptAmount) }} 未确认收货</view>
							<view class="sum-not-receipt-amount" v-if="data.sumNotReceiptAmount>0">确认收货后才计入消费金额</view>
						</view>
						<u-circle-progress type="success" :percent="percentFn('total_order_amount')" bg-color="#f7f9fd" width="130" border-width="10">
							<view class="u-progress-content">
								<view class="u-progress-dot"></view>
								<text class='u-progress-info'>{{ percentFn('total_order_amount') }}%</text>
							</view>
						</u-circle-progress>
					</view>
				</view>

				<view class="list" v-if="nextLevelInfo && nextLevelInfo.name && nextLevelInfo.total_per_1>0">
					<view class="list-title">条件2：{{ percentFn('total_per_1') == 100 ? '（已达标）':'（未达标）' }}</view>
					<view class="list-item">
						<u-icon name="vk-mall-icon-shouyi" size="80"></u-icon>
						<view class="list-item-text">
							<view class="item-title">直推业绩</view>
							<view class="item-amount">{{ $fn.priceFilter(nextLevelInfo.total_per_1) }}<text v-if="diffFn('total_per_1')>0">（差{{ vk.pubfn.priceFilter(diffFn('total_per_1')) }}）</text></view>
						</view>
						<u-circle-progress type="success" :percent="percentFn('total_per_1')" bg-color="#f7f9fd" width="130" border-width="10">
							<view class="u-progress-content">
								<view class="u-progress-dot"></view>
								<text class='u-progress-info'>{{ percentFn('total_per_1') }}%</text>
							</view>
						</u-circle-progress>
					</view>
				</view>

				<view class="list" v-if="nextLevelInfo && nextLevelInfo.name && nextLevelInfo.total_share_1>0">
					<view class="list-title">条件3：{{ percentFn('total_share_1') == 100 ? '（已达标）':'（未达标）' }}</view>
					<view class="list-item">
						<u-icon name="vk-mall-icon-pintuan" size="80"></u-icon>
						<view class="list-item-text">
							<view class="item-title">直推人数</view>
							<view class="item-amount">{{ nextLevelInfo.total_share_1 }} 人<text v-if="diffFn('total_share_1')>0">（差 {{ diffFn('total_share_1') }} 人）</text></view>
						</view>
						<u-circle-progress type="success" :percent="percentFn('total_share_1')" bg-color="#f7f9fd" width="130" border-width="10">
							<view class="u-progress-content">
								<view class="u-progress-dot"></view>
								<text class='u-progress-info'>{{ percentFn('total_share_1') }}%</text>
							</view>
						</u-circle-progress>
					</view>
				</view>
			</view>
		</view>
		<block v-if="complete">
			<view class="receive-btn" v-if="isMaxLv"> 恭喜您已达到最高级别 </view>
			<view class="receive-btn" v-else-if="isUpgrade" @click="upgradeLv(nextLevelInfo.lv)"> 立即{{ upgradeTextCom }}为 {{ nextLevelInfo.name }} </view>
			<view class="receive-btn" v-else> 不满足升级条件 </view>
		</block>

		<!-- 当前等级权益 -->
		<view class="vip-explain" v-if="complete">
			<view class="cell-box">
				<view class="text" style="width: 100%;">{{ lvInfo.name }} 权益（您当前等级）</view>
			</view>
			<view class="list">

				<view class="list-item" v-if="lvInfo.share_reward_1">
					<u-icon name="vk-mall-icon-shouyi" size="80"></u-icon>
					<view class="list-item-text">
						<view class="item-title">直推佣金</view>
						<view class="item-describe">获取倍率 * {{ lvInfo.share_reward_1 }}</view>
					</view>
				</view>

				<view class="list-item" v-if="lvInfo.share_reward_2">
					<u-icon name="vk-mall-icon-shouyi" size="80"></u-icon>
					<view class="list-item-text">
						<view class="item-title">间推佣金</view>
						<view class="item-describe">获取倍率 * {{ lvInfo.share_reward_2 }}</view>
					</view>
				</view>

			</view>
		</view>

		<!-- 下一级等级权益 -->
		<view class="vip-explain" v-if="complete && nextLevelInfo && nextLevelInfo.name">
			<view class="cell-box">
				<view class="text" style="width: 100%;">{{ nextLevelInfo.name }} 权益（下一级）</view>
			</view>
			<view class="list">

				<view class="list-item">
					<u-icon name="vk-mall-icon-shouyi" size="80"></u-icon>
					<view class="list-item-text">
						<view class="item-title">直推佣金</view>
						<view class="item-describe">获取倍率 * {{ nextLevelInfo.share_reward_1 }}</view>
					</view>
				</view>

				<view class="list-item">
					<u-icon name="vk-mall-icon-shouyi" size="80"></u-icon>
					<view class="list-item-text">
						<view class="item-title">间推佣金</view>
						<view class="item-describe">获取倍率 * {{ nextLevelInfo.share_reward_2 }}</view>
					</view>
				</view>

			</view>
		</view>


		<view style="height: 20rpx;display: block;" class="safe-area-inset-bottom"></view>

		<!-- 页面内容结束 -->
		<!-- 全局公共浮球导航模块 -->
		<vk-data-float-ball :scroll-top="scrollTop"></vk-data-float-ball>
		<vk-data-loading v-model="loading"></vk-data-loading>
	</view>
</template>

<script>
	var vk = uni.vk;			// vk依赖
	export default {
		data() {
			// 页面数据变量
			return {
				lvInfo:{
					name:"获取中...",
					get_time:0
				},
				// 下一级信息
				nextLevelInfo:{},
				// init请求返回的数据
				data:{
					mchInfo:{},
					total_share_1:0,
					total_per_1:0,
					sumNotReceiptAmount:0,
					total_order_amount:0,
					total_recharge_amount:0
				},
				scrollTop:0,
				loading:false,
				complete:false
			}
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		// 监听 - 页面每次【加载时】执行(如：前进)
		onLoad(options = {}) {
			vk = uni.vk;
			this.options = options;
			this.init(options);
		},
		// 监听 - 页面【首次渲染完成时】执行。注意如果渲染速度快，会在页面进入动画完成前触发
		onReady(){},
		// 监听 - 页面每次【显示时】执行(如：前进和返回) (页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面)
		onShow() {},
		// 监听 - 页面每次【隐藏时】执行(如：返回)
		onHide() {},
		// 函数
		methods: {
			// 页面数据初始化函数
			init(options){
				this.getMyInfo();
			},
			getMyInfo(){
				let that = this;
				vk.callFunction({
					url: 'client/salesman.getMyFxLvInfo',
					success: (data) => {
						that.data = data;
						if (data.mchInfo) vk.setVuex("$user.mchInfo", data.mchInfo);
						let { userInfo={} } = data;
						let levelRule = vk.getVuex("$user.mchInfo.fx.level_rule");
						let showLv = userInfo.fx.lv;
						// 如果我的等级是0,代表我不是会员,因此需要展示等级1的会员信息
						that.lvInfo = vk.pubfn.getListItem(levelRule, "lv", showLv);
						// 获取下一级
						that.nextLevelInfo = vk.pubfn.getListItem(levelRule, "lv", showLv+1);
						that.complete = true;
					}
				});
			},
			// 升级
			upgradeLv(lv){
				vk.callFunction({
					url: 'client/salesman.upgradeLv',
					title: '请求中...',
					data: {
						lv
					},
					success: (data) => {
						vk.alert(data.msg,"提示");
						this.getMyInfo();
					}
				});
			},
			// 计算差值
			diffFn(name){
				let that = this;
				let diff = 0;
				let { vk, nextLevelInfo } = that;
				if (nextLevelInfo && nextLevelInfo.name) {
					let total = that.data[name];
					diff = nextLevelInfo[name] - total;
					if (diff<0) diff = 0;
				}
				return diff;
			},
			// 计算百分比
			percentFn(name){
				let that = this;
				let percent = 0;
				let { vk, nextLevelInfo } = that;
				if (nextLevelInfo && nextLevelInfo[name]) {
					let total = that.data[name];
					percent = vk.pubfn.toDecimal(total / nextLevelInfo[name] * 100, 2);
					if (percent < 0) percent = 0;
					if (percent > 100) percent = 100;
				}
				return percent;
			},
			vipNameFn(vip_lv){
				let vip_level_rule = vk.getVuex('$user.mchInfo.vip_level_rule');
				let item = vk.pubfn.getListItem(vip_level_rule, "lv", vip_lv) || {};
				return item.name;
			},
			minVipLvPercent(vip_lv){
				let my_vip_lv = vk.getVuex("$user.userInfo.vip_lv");
				return my_vip_lv >= vip_lv ? 100 : 0;
			}
		},
		// 监听器
		watch:{

		},
		// 计算属性
		computed:{
			isHaveCom(){
				return vk.getVuex("$user.userInfo.vip_lv") > 0 ? true : false;
			},
			// 是否可升级
			isUpgrade(){
				let {
					nextLevelInfo = {}
				} = this;
				if (nextLevelInfo.upgrade_mode === 1) {
					// 简单模式
					let key = this.minVipLvPercent(nextLevelInfo.min_vip_lv);
					return key == 100 ? true : false;
				} else {
					// 常规模式
					let key1 = false;
					let key2 = false;
					let key3 = false;
					let total_recharge_amount =  this.percentFn('total_recharge_amount');
					let total_order_amount =  this.percentFn('total_order_amount');

					let total_per_1 =  this.percentFn('total_per_1');
					let total_share_1 =  this.percentFn('total_share_1');

					if (nextLevelInfo.total_recharge_amount > 0 && total_recharge_amount === 100) {
						key1 = true;
					}

					if (nextLevelInfo.total_order_amount > 0 && total_order_amount === 100) {
						key1 = true;
					}

					if (!nextLevelInfo.total_per_1 || total_per_1 === 100) {
						key2 = true;
					}

					if (!nextLevelInfo.total_share_1 || total_share_1 === 100) {
						key3 = true;
					}

					if (key1 && key2 && key3) {
						return true;
					} else {
						return false;
					}
				}
			},
			// 是否是最大等级
			isMaxLv(){
				let { vk, nextLevelInfo } = this;
				return vk.pubfn.isNotNull(nextLevelInfo) ? false : true;
			},
			upgradeTextCom(){
				return vk.getVuex('$user.userInfo.vip_lv') > 0 ? '升级' : '领取';
			},

		}
	}
</script>
<style lang="scss" scoped>
	.app{
		--bgcolor:#333333;
	}
	.vip-card{
		background-color: #b9c3d5;
		width: 80%;
		margin: 0rpx auto;
		height: 260rpx;
		border-radius: 20rpx;
		position: relative;
		padding: 30rpx;
		overflow: hidden;
		box-shadow:2rpx 6rpx 4rpx 6rpx #b9c3d5;
		color: #3a4b6c;
		.name{
			margin-top: 40rpx;
			font-size: 40rpx;
			font-weight: bold;
		}
		.nickname{
			margin-top: 20rpx;
			font-size: 24rpx;
		}
		.add-time{
			font-size: 24rpx;
			text-align: right;
			.time-text{
				min-width: 140rpx;
				display: inline-block;
			}
		}
		.vip-bg{
			position: absolute;
			right:-15rpx;
			top:-15rpx;
			font-size: 80rpx;
			font-weight: bold;
			color: #ffffff;
			opacity: 0.3;
		}
	}

	.vip-explain{
		width: 90%;
		margin: 60rpx auto 0 auto;
		background-color: #ffffff;
		border-radius: 20rpx;
		padding: 30rpx;
		.cell-box{
			display: flex;
			padding: 20rpx 0;
			.title{
				width: 160rpx;
				font-weight: bold;
				font-size: 30rpx;
			}
			.text{
				flex: 1;
				font-weight: bold;
				color: var(--main);
			}
		}
		.list{
			background-color: #f7f9fd;
			margin: 10px 0px;
			padding: 20rpx;
			border-radius: 20rpx;
			overflow: hidden;
			.list-title{
				font-size: 34rpx;
				font-weight: bold;
			}
			.list-item{
				display: flex;
				margin-top: 50rpx;
				align-items: center;
				.list-item-text{
					flex: 1;
					margin-left: 30rpx;
					.item-title{
						font-weight: bold;
						font-size: 34rpx;
					}
					.item-describe{
						margin-top: 6rpx;
						font-size: 26rpx;
						color: #9d9d9d;
					}
					.item-amount{
						margin-top: 6rpx;
						font-size: 26rpx;
						color: #9d9d9d;
					}
					.sum-not-receipt-amount{
						margin-top: 6rpx;
						font-size: 24rpx;
						color: #9d9d9d;
					}
				}
			}
			.list-item:first-child{
				margin-top: 0rpx;
			}
		}
	}

	.receive-btn{
		background: linear-gradient(to right, #f8e4c3, #e5c38c);
		border-radius: 40rpx;
		width: 90%;
		margin: 40rpx auto;
		color: #624520;
		padding: 24rpx;
		font-weight: bold;
		text-align: center;
		letter-spacing :2rpx;
	}
	.receive-btn:active{
		opacity: 0.7;
	}
</style>
